<template>
  <div class="rating">
    <div class="rating-head">
      <div class="left">
        <span style="color: #ffc300; font-size: 16px">{{
          score.toFixed(1)
        }}</span>
        <span style="font-size: 14px">综合评分</span>
        <span style="font-size: 12px; color: #b5b5b5">高于周边商家96%</span>
      </div>
      <div class="right">
        <p>
          <span>服务态度</span>
          <van-rate v-model="point" icon="star" void-icon="star-o" />
          <span>{{ point }}</span>
        </p>
        <p>
          <span>菜品质量</span>
          <van-rate v-model="point" icon="star" void-icon="star-o" />
          <span>{{ point }}</span>
        </p>
        <p>
          <span>送达时间</span>
          <span>20分钟</span>
        </p>
      </div>
    </div>
    <div class="rating-cont">
      <van-tabs type="card">
        <van-tab :title="'全部' + data.length" id="0">
          <ul class="content">
            <li v-for="(item, index) in data" :key="index">
              <div style="display: flex; padding: 20px 20px 0 20px">
                <div class="img">
                  <img
                    style="width: 50px; border-radius: 50%; margin-right: 10px"
                    :src="item.avatar"
                    alt=""
                  />
                </div>
                <div class="info">
                  <p style="display: flex; justify-content: space-between">
                    <span>{{ item.username }}</span>
                    <span style="color: #b5b5b5; font-size: 12px">{{
                      item.rateTime | formatDate
                    }}</span>
                  </p>
                  <p>
                    <van-rate
                      v-model="item.score"
                      icon="star"
                      void-icon="star-o"
                      color="#ffd21e"
                      void-color="#eee"
                      readonly
                    />
                    <span
                      style="margin-left: 10px; font-size: 12px; color: #b5b5b5"
                      >{{
                        item.deliveryTime ? item.deliveryTime + "分钟送达" : ""
                      }}</span
                    >
                  </p>
                  <p>{{ item.text }}</p>
                  <p style="display: flex; flex-wrap: wrap">
                    <span>{{ item.score > 3 ? "👍" : "👎" }}</span>
                    <span
                      v-for="(child, index) in item.recommend"
                      :key="index"
                      style="
                        padding: 2px;
                        border: 1px solid #b5b5b5;
                        color: #b5b5b5;
                        font-size: 12px;
                        border-radius: 2px;
                        margin-left: 5px;
                        margin-bottom: 5px;
                      "
                      >{{ child }}</span
                    >
                  </p>
                </div>
              </div>
              <van-divider />
            </li>
          </ul>
        </van-tab>
        <van-tab :title="'满意' + pleased.length" id="1">
          <ul class="content">
            <li v-for="(item, index) in pleased" :key="index">
              <div style="display: flex; padding: 20px">
                <div class="img">
                  <img
                    style="width: 50px; border-radius: 50%; margin-right: 10px"
                    :src="item.avatar"
                    alt=""
                  />
                </div>
                <div class="info">
                  <p style="display: flex; justify-content: space-between">
                    <span>{{ item.username }}</span>
                    <span style="color: #b5b5b5; font-size: 12px">{{
                      item.rateTime | formatDate
                    }}</span>
                  </p>
                  <p>
                    <van-rate
                      v-model="item.score"
                      icon="star"
                      void-icon="star-o"
                      color="#ffd21e"
                      void-color="#eee"
                      readonly
                    />
                    <span
                      style="margin-left: 10px; font-size: 12px; color: #b5b5b5"
                      >{{
                        item.deliveryTime ? item.deliveryTime + "分钟送达" : ""
                      }}</span
                    >
                  </p>
                  <p>{{ item.text }}</p>
                  <p style="display: flex; flex-wrap: wrap">
                    <span>{{ item.score > 3 ? "👍" : "👎" }}</span>
                    <span
                      v-for="(child, index) in item.recommend"
                      :key="index"
                      style="
                        padding: 2px;
                        border: 1px solid #b5b5b5;
                        color: #b5b5b5;
                        font-size: 12px;
                        border-radius: 2px;
                        margin-left: 5px;
                        margin-bottom: 5px;
                      "
                      >{{ child }}</span
                    >
                  </p>
                </div>
              </div>
              <van-divider />
            </li>
          </ul>
        </van-tab>
        <van-tab :title="'不满意' + dissat.length" id="2">
          <ul class="content">
            <li v-for="(item, index) in dissat" :key="index">
              <div style="display: flex; padding: 20px">
                <div class="img">
                  <img
                    style="width: 50px; border-radius: 50%; margin-right: 10px"
                    :src="item.avatar"
                    alt=""
                  />
                </div>
                <div class="info">
                  <p style="display: flex; justify-content: space-between">
                    <span>{{ item.username }}</span>
                    <span style="color: #b5b5b5; font-size: 12px">{{
                      item.rateTime | formatDate
                    }}</span>
                  </p>
                  <p>
                    <van-rate
                      v-model="item.score"
                      icon="star"
                      void-icon="star-o"
                      color="#ffd21e"
                      void-color="#eee"
                      readonly
                    />
                    <span
                      style="margin-left: 10px; font-size: 12px; color: #b5b5b5"
                      >{{
                        item.deliveryTime ? item.deliveryTime + "分钟送达" : ""
                      }}</span
                    >
                  </p>
                  <p>{{ item.text }}</p>
                  <p style="display: flex; flex-wrap: wrap">
                    <span>{{ item.score > 3 ? "👍" : "👎" }}</span>
                    <span
                      v-for="(child, index) in item.recommend"
                      :key="index"
                      style="
                        padding: 2px;
                        border: 1px solid #b5b5b5;
                        color: #b5b5b5;
                        font-size: 12px;
                        border-radius: 2px;
                        margin-left: 5px;
                        margin-bottom: 5px;
                      "
                      >{{ child }}</span
                    >
                  </p>
                </div>
              </div>
              <van-divider />
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { rating } from "@/apis/commod";
import dayjs from "dayjs";
interface Idata {
  avatar: string;
  deliveryTime: number;
  rateTime: number;
  rateType: number;
  recommend: Array<string>;
  score: number;
  text: string;
  username: string;
}
@Component({
  filters: {
    formatDate(val: string): string {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
})
export default class extends Vue {
  // 全部评价数据
  data: Array<Idata> = [];
  // 满意评价数据
  pleased: Array<Idata> = [];
  // 不满意评价数据
  dissat: Array<Idata> = [];
  score: number = 0;
  point: number = 4.5;
  /*   render(obj: any, dom: string) {
    let html: string = `<ul class="content">
            <li v-for="item in ${obj}" :key="item.username">
              <div style="display: flex; padding: 20px 20px 0 20px">
                <div class="img">
                  <img
                    style="width: 50px; border-radius: 50%; margin-right: 10px"
                    :src="item.avatar"
                    alt=""
                  />
                </div>
                <div class="info">
                  <p style="display: flex; justify-content: space-between">
                    <span>{{ item.username }}</span>
                    <span style="color: #b5b5b5; font-size: 12px">{{
                      item.rateTime | formatDate
                    }}</span>
                  </p>
                  <p>
                    <van-rate
                      v-model="item.score"
                      icon="star"
                      void-icon="star-o"
                      color="#ffd21e"
                      void-color="#eee"
                      readonly
                    />
                    <span
                      style="margin-left: 10px; font-szie: 12px; color: #b5b5b5"
                      >{{ item.deliveryTime }}分钟送达</span
                    >
                  </p>
                  <p>{{ item.text }}</p>
                  <p style="display: flex; flex-wrap: wrap">
                    <span>{{ item.score > 3 ? "👍" : "👎" }}</span>
                    <span
                      v-for="(child, index) in item.recommend"
                      :key="index"
                      style="
                        padding: 2px;
                        border: 1px solid #b5b5b5;
                        color: #b5b5b5;
                        font-size: 12px;
                        border-radius: 2px;
                        margin-left: 5px;
                        margin-bottom: 5px;
                      "
                      >{{ child }}</span
                    >
                  </p>
                </div>
              </div>
              <van-divider />
            </li>
          </ul>`;
    let a: any = document.getElementById(dom);
    a.innerHTML = html;
  } */
  async created(): Promise<void> {
    let res = await rating();
    // console.log(res);
    this.data = res.data.data;
    console.log(this.data);
    let sumScore: number = 0;
    this.data.forEach((item) => {
      sumScore += item.score;
    });
    this.score = Math.ceil(sumScore / this.data.length);
    console.log(this.score);
    this.data.forEach((item) => {
      if (item.score > 3) {
        this.pleased.push(item);
      } else {
        this.dissat.push(item);
      }
    });
    console.log(this.pleased);
    // this.render(this.data, "1");
  }
}
</script>

<style lang="scss" scoped>
.rating {
  background: #f4f5f7;
  width: 100%;
  height: 100%;
  .rating-head {
    display: flex;
    padding: 20px;
    background: #fff;
    margin-bottom: 20px;
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 15px 0 0;
      border-right: 1px solid #f3f3f3;
      margin-right: 15px;
      span {
        margin-bottom: 5px;
      }
    }
    .right {
      p {
        line-height: 30px;
        font-size: 14px;
        span {
          margin-right: 5px;
        }
        span:first-child {
          font-weight: bold;
        }
      }
    }
  }
  .rating-cont {
    background: #fff;
    padding: 10px;
  }
}
.info {
  width: 100%;
  margin-bottom: 10px;
  p {
    margin-bottom: 10px;
  }
}
.content {
  width: 100%;
  height: 100%;
}
</style>